<template>
  <div class="waterfall">
    <div class="column" style="margin:0 2%;">
      <WaterFallItem v-for="(item, index) in left.list" :key="index" :item="item"></WaterFallItem>
    </div>
    <div class="column">
      <WaterFallItem v-for="(item, index) in right.list" :key="index" :item="item"></WaterFallItem>
    </div>
    <div class="column">
      <WaterFallItem v-if="!!list[0]" :item="list[0]" @onLoad="reCal"></WaterFallItem>
    </div>
  </div>
</template>

<script>
import WaterFallItem from './WaterFallItem.vue'
import { ref, toRefs } from 'vue'
import { useRouter } from 'vue-router'
export default {
  name: 'WaterFall',
  props: {
    itemList: Array
  },
  components: {
    WaterFallItem
  },
  setup(props) {
    const { itemList: list } = toRefs(props);
    let left = ref({
      list: [],
      postion: 0,
    })
    let right = ref({
      list: [],
      postion: 0,
    })
    const router = useRouter()
    let navTo = (path) => {
      router.push(path)
    }
    let reCal = (height) => {
      if (left.value.postion < right.value.postion) {
        left.value.list.push(list.value.shift());
        left.value.postion += height;
      } else {
        right.value.list.push(list.value.shift());
        right.value.postion += height;
      }
    }
    return {
      list,
      left,
      right,
      reCal,
      navTo
    }
  }
}
</script>

<style scoped>
.waterfall {
  display: flex;
  width: 100%;
  justify-content: left;
  flex-wrap: wrap;
}

.column {
  width: 47%;
  display: flex;
  flex-direction: column;
}
</style>